<template>
  <section class="secretaryManagement">
    <el-menu class="left-menu"
             default-active="任职管理"
             @select="handleMenuChange">
      <el-menu-item index="任职管理"
                    v-show="user.roleCode === 'CITY_LEADER'">
        <template slot="title"><i class="el-icon-user"></i><span>任职管理</span></template>
      </el-menu-item>
      <el-menu-item index="基本信息"
                    v-show="user.sysDistrict.districtType!=='Depart'">
        <template slot="title"><i class="el-icon-tickets"></i><span>基本信息</span></template>
      </el-menu-item>
      <el-menu-item index="考核管理">
        <template slot="title"><i class="el-icon-edit-outline"></i><span>考核管理</span></template>
      </el-menu-item>
      <el-menu-item index="职级评定"
                    v-show="user.sysDistrict.districtType!=='Depart'">
        <template slot="title"><i class="el-icon-star-off"></i><span>职级评定</span></template>
      </el-menu-item>
        <!--<el-menu-item index="任务管理"
                      v-show="user.sysDistrict.districtLevel<3&&user.sysDistrict.districtType!=='Depart'">
            <template slot="title"><i class="el-icon-s-promotion"></i><span>任务管理</span></template>
        </el-menu-item>-->
    </el-menu>

    <div class="right-content">
      <!--任职管理组件-->
      <SecretaryChange v-if="outerTabActive === '任职管理'"></SecretaryChange>

      <TaskRelease @jumpEdit="handleJump"
                   v-if="outerTabActive === '任务管理'"></TaskRelease>

      <!--基本信息组件-->
      <el-tabs v-else-if="outerTabActive === '基本信息'"
               v-model="baseInfoTabActive"
               type="card"
               :style="tabStyle()">
          <el-tab-pane name="任务发布"
                       label="任务发布"
                       v-if="user.roleCode === 'CITY_LEADER'">
              <span slot="label"><i class="el-icon-s-promotion"></i> 信息录入</span>
              <MessageRelease v-if="baseInfoTabActive === '任务发布'"></MessageRelease>
          </el-tab-pane>
          <el-tab-pane name="信息审核"
                       label="信息审核"
                       v-if="user.roleCode === 'CITY_LEADER'">
              <span slot="label"><i class="el-icon-s-claim"></i> 信息审核</span>
              <Verify v-if="baseInfoTabActive === '信息审核'"></Verify>
          </el-tab-pane>
        <el-tab-pane name="信息查询"
                     label="信息查询" >
          <span slot="label"><i class="el-icon-s-help"></i> 信息查询</span>
          <CsjDetail v-if="baseInfoTabActive === '信息查询'"
                     :isEdit="false"></CsjDetail>
        </el-tab-pane>
        <el-tab-pane name="信息编辑"
                     label="信息编辑"
                     v-if="user.roleCode === 'TOWN_REVIEWER' && hasTask" >
          <span slot="label"><i class="el-icon-s-comment"></i> 信息编辑</span>
          <CsjDetail v-if="baseInfoTabActive === '信息编辑'"
                     :isEdit="true"></CsjDetail>
        </el-tab-pane>
        <el-tab-pane name="统计分析"
                     label="统计分析"
                     v-if="user.roleCode === 'CITY_LEADER'" >
          <span slot="label"><i class="el-icon-s-data"></i> 统计分析</span>
          <SecretaryStatistics v-if="baseInfoTabActive === '统计分析'"></SecretaryStatistics>
        </el-tab-pane>
      </el-tabs>

      <!--  考核管理组件-->
      <el-tabs v-model="baseInfoTabActive"
               v-else-if="outerTabActive === '考核管理'"
               type="card"
               :style="tabStyle()">
        <el-tab-pane label="指标制定"
                     name="指标制定">
            <span slot="label"><i class="el-icon-s-order"></i> 指标制定</span>
          <MakeContent v-if="baseInfoTabActive === '指标制定'"></MakeContent>
        </el-tab-pane>
        <el-tab-pane label="考核实施"
                     name="考核实施">
            <span slot="label"><i class="el-icon-s-check"></i> 考核实施</span>
          <CheckContent v-if="baseInfoTabActive === '考核实施'"></CheckContent>
        </el-tab-pane>
        <el-tab-pane v-if="user.sysDistrict.districtType!=='Depart'" label="考核结果" name="考核结果">
            <span slot="label"><i class="el-icon-s-claim"></i> 考核结果</span>
          <ReviewResult v-if="baseInfoTabActive === '考核结果' && user.sysDistrict.districtType!=='Depart'"></ReviewResult>
        </el-tab-pane>
          <el-tab-pane v-if="user.roleCode === 'CITY_LEADER'" label="考核分析" name="考核分析">
              <span slot="label"><i class="el-icon-s-data"></i> 考核分析</span>
              <CheckAnalysis v-if="baseInfoTabActive === '考核分析' && user.roleCode === 'CITY_LEADER'"></CheckAnalysis>
<!--              <AddtionalReview v-if="baseInfoTabActive === '考核补录'"></AddtionalReview>-->
          </el-tab-pane>
          <el-tab-pane v-if="user.roleCode === 'DEVELOPER'" label="结果编辑" name="结果编辑">
              <span slot="label"><i class="el-icon-s-data"></i> 结果编辑</span>
              <CommonCRUD :columns="columns" api-root="identity/kPIVillageStatistics"
                          :formColumns="formColumns" :queryFormColumns="queryColumns" :sortColumns="sortQuery">
                  <template slot="header-btn" slot-scope="slotProps">
                      <el-button type="primary"  plain  @click="doubleCheckDia = true" >双验证数据更新</el-button>
                  </template>
              </CommonCRUD>
          </el-tab-pane>
      </el-tabs>

      <!-- 职级评定组件-->
      <el-tabs v-else-if="outerTabActive === '职级评定'"
               type="card"
               :style="tabStyle()"
               v-model="baseInfoTabActive">
        <el-tab-pane label="职级分布"
                     name="职级分布">
            <span slot="label"><i class="el-icon-menu"></i> 职级分布</span>
          <VillageSecretaryDisplay v-if="baseInfoTabActive === '职级分布'"></VillageSecretaryDisplay>
        </el-tab-pane>
        <el-tab-pane label="智能筛选" name="智能筛选" v-if="user.roleCode === 'CITY_LEADER'">
            <span slot="label"><i class="el-icon-s-promotion"></i> 智能筛选</span>
          <IntelligentScreening v-if="baseInfoTabActive === '智能筛选'"></IntelligentScreening>
        </el-tab-pane>
        <el-tab-pane label="职级调整" name="职级调整">
            <span slot="label"><i class="el-icon-s-order"></i> 职级调整</span>
          <RankAdjustment v-if="baseInfoTabActive === '职级调整'"></RankAdjustment>
        </el-tab-pane>
        <!--                <el-tab-pane label="破格情形">破格情形</el-tab-pane>-->
      </el-tabs>

    </div>
      <el-dialog :visible.sync="doubleCheckDia" :append-to-body="true" title="更新双验证数据">
          <span>选择年份</span>
          <el-date-picker
              v-model="doubleCheckTaskYear"
              type="year"
              placeholder="请选择年份"
              value-format="yyyy">
          </el-date-picker>
          <div style="margin-top: 20px;text-align: right">
              <el-button @click="doubleCheckDia = false">取 消</el-button>
              <el-button type="primary" @click="handleDoubleCheck" :loading="doubleCheckSubmitLoad">确 定</el-button>
          </div>

      </el-dialog>
  </section>
</template>

<script>
import CommonCRUD from '@/components/CommonCRUD';
import SecretaryStatistics from "@/components/SecretaryStatistics";
import CsjDetail from "../../components/CsjDetail";
import TaskRelease from "@/components/TaskRelease";
import SecretaryChange from "@/components/SecretaryChange";
import VillageSecretaryDisplay from "@/views/menu/VillageSecretaryDisplay";
import Verify from "../../components/Verify";
import CheckContent from "@/components/CheckContent";
import MakeContent from "../../components/MakeContent";
import ReviewResult from '../../components/ReviewResult';
import RankAdjustment from "@/components/RankAdjustment";
import IntelligentScreening from "../../components/IntelligentScreening";
import AddtionalReview from "../../components/AddtionalReview";
import CheckAnalysis from "@/components/CheckAnalysis";
import MessageRelease from "../../components/MessageRelease";
import EditRank from "@/views/data/EditRank";
export default {
  name: "SecretaryManagement",
  data () {
    return {
      secretaryDetailVis: true,
      secretaryDetailReview: false,
      currentDetailDistrictId: '',
      isFromList: false,
      user: {},
      rankDetailVis: true,
      currentRankForm: {},
      rankQueryForm: [
        {
          des: '是否是标准',
          name: 'isStandard',
          type: 'string',
          value: '1',
          visible: false,
        },
      ],
      outerTabActive: '',
      baseInfoTabActive: '任务发布',
      isEdit: false,
      hasTask: false,
      columns:EditRank.columns,
      formColumns:EditRank.columns,
      queryColumns:[
          {
              des: '镇级组织',
              name: 'parentDistrictName',
              type: 'string',
              value: '',
              visible: true,
          },
          {
              des: '组织',
              name: 'districtName',
              type: 'string',
              value: '',
              visible: true,
          },
          {
              des: '指标名称',
              name: 'quotaName',
              type: 'string',
              value: '',
              visible: true,
          },
          {
              des: '指标层级',
              name: 'quotaLevel',
              type: 'string',
              value: '',
              visible: true,
          },

      ],
      sortQuery:[
          {
              name:'quotaId',
              type:'asc'
          },
          {
              name:'districtId',
              type:'asc'
          }
      ],
        doubleCheckDia:false,
        doubleCheckTaskYear:'',
        doubleCheckSubmitLoad:false
    }
  },
  watch: {
    'baseInfoTabActive': {
      handler: function () {
        console.log(this.baseInfoTabActive);
        console.log(this.outerTabActive)
      }
    },


  },
  methods: {
    handleReview (data) {
      this.currentDetailDistrictId = data.districtId;
      this.secretaryDetailReview = data.type === 'review';
      this.isFromList = true;
      this.secretaryDetailVis = true;
    },
    handleRank (data) {
      this.currentRankForm = data;
      this.rankDetailVis = true;
    },
    tabStyle () {
      let style = {
        background: 'rgba(255, 255, 255, .2)'
      }
      if (this.outerTabActive === '基本信息' && this.baseInfoTabActive === '信息编辑' && this.isEdit) {
        style.background = 'rgba(204, 232, 207, .2)'
      }
      return style;
    },
    handleMenuChange (index) {
      this.outerTabActive = index;
      if (index === '考核管理') {
        this.baseInfoTabActive = '指标制定';
      } else if (index === '基本信息') {
          if(this.user.roleCode==='CITY_LEADER'){
              this.baseInfoTabActive = '任务发布';
          }else{
              this.baseInfoTabActive = '信息查询';
          }
      } else if (index === '职级评定') {
        this.baseInfoTabActive = '职级分布'
      }
    },
    checkIsHasTask () {
      this.$http("POST", '/identity/cadreTask/getCurrentTask/基本信息更新', {}, false).then(
        data => {
          if (data) {
            this.hasTask = true;
          }
        }
      )
    },
    handleJump (taskType) {
      if (taskType === '基本信息更新') {
        this.outerTabActive = '基本信息';
        this.baseInfoTabActive = '信息编辑';
      } else if (taskType === '日常工作考核' || taskType === '考核实施') {
        this.outerTabActive = '考核管理';
        this.baseInfoTabActive = '考核实施';
      } else if (taskType === '考核指标内容制定') {
        this.outerTabActive = '考核管理';
        this.baseInfoTabActive = '指标制定';
      } else {

      }
    },
      handleDoubleCheck(){
        if(this.doubleCheckTaskYear){
            this.doubleCheckSubmitLoad = true;
            this.$http('get',`identity/kPIStatistics/updateDoubleVerify?taskYear=${this.doubleCheckTaskYear}`).then(data=>{
                this.doubleCheckDia = false;
                this.doubleCheckSubmitLoad = false;
            }).catch(()=>{
                this.doubleCheckDia = false;
                this.doubleCheckSubmitLoad = false;
            })
        }else{
            this.$message({
                type:'warning',
                message:'请选择年份'
            })
        }
      }
  },
  components: {
    Verify,
    CsjDetail,
    CommonCRUD,
    SecretaryStatistics,
    TaskRelease,
    SecretaryChange,
    VillageSecretaryDisplay,
    CheckContent,
    MakeContent,
    ReviewResult,
    RankAdjustment,
    IntelligentScreening,
      CheckAnalysis,
      MessageRelease
  },
  mounted () {
    if (this.user.sysDistrict.districtType !== 'Depart') {
      this.checkIsHasTask();
    }
  },
  created () {
    // this.user = this.$store.state.userInfo;
    this.user = JSON.parse(sessionStorage.getItem("userInfo"));
    this.secretaryDetailVis = this.user.roleCode === 'COUNTRY_SIDE_ACTOR';
    this.rankDetailVis = this.user.roleCode === 'COUNTRY_SIDE_ACTOR';
    if (this.user.roleCode === 'COUNTRY_SIDE_ACTOR') {
      this.currentDetailDistrictId = this.user.districtId;
    }
    this.$store.commit('updateIsCollapse', !this.$store.state.isCollapse);
    if (this.user.roleCode === 'CITY_LEADER') {
      this.outerTabActive = '任职管理';
    } else if (this.user.sysDistrict.districtType === 'Depart') {//部门角色
      this.outerTabActive = '考核管理';
        this.baseInfoTabActive = '指标制定';
    } else if (this.user.roleCode === 'TOWN_REVIEWER') {
      this.outerTabActive = '基本信息';
        this.baseInfoTabActive = '信息查询';
    }
    //   this.checkIsHasTask();
  }
}
</script>
<style>
.secretaryManagement .el-tabs__item:not(.is-active):hover {
    color: #ffffff !important;
}
.secretaryManagement {
  width: 100%;
  height: 100%;
  padding: 3px 3px;
}
.secretaryManagement .el-tabs--border-card > .el-tabs__content {
    padding: 5px 15px;
  min-height: 870px !important;
}
.secretaryManagement .el-menu-item {
  font-size: 18px;
}
.secretaryManagement .el-menu-item i {
  color: rgba(255, 255, 255, 0.62);
}
.secretaryManagement .el-menu-item.is-active i {
  color: white;
}
.secretaryManagement .el-menu-item i {
  font-size: 20px !important;
}
.secretaryManagement .left-menu .el-menu-item {
  color: rgba(255, 255, 255, 0.62);
  padding: 0 20px;
  cursor: pointer;
}
.secretaryManagement .left-menu {
  width: 150px;
  vertical-align: top;
  display: inline-block;
  border: solid 1px #e6e6e6;
  border-right: none;
  position: relative;
  /*box-shadow: 0 2px 4px 0 rgba(0,0,0,.12), 0 0 6px 0 rgba(0,0,0,.04);*/
  z-index: 3;
  text-align: left;
  background: linear-gradient(60deg, #66aabb, #43a047) !important;
  box-shadow: 0 12px 20px -10px rgba(76, 175, 80, 0.28) !important;
}
.secretaryManagement .el-menu-item.is-active {
  color: #fff !important;
}

.secretaryManagement .right-content {
  width: calc(100% - 160px);
  padding: 0 0 0 10px;
  display: inline-block;
  border-left: solid 1px #e6e6e6;
  position: relative;
 /* box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.12), 0 0 6px 0 rgba(0, 0, 0, 0.04);*/
  left: -6px;
  min-height: 100%;
}
.secretaryManagement .el-menu-item:focus,
.el-menu-item:hover {
  outline: 0;
  background-color: #ecf5ff29;
}
.secretaryManagement .el-tabs {
  background: transparent;
  box-shadow: none;
  border: none;
}
.secretaryManagement .el-tag {
  height: 40px;
  font-size: 16px;
  line-height: 40px;
}
.secretaryManagement .el-tabs--card>.el-tabs__header{
    border-bottom: 1px solid #45A04E;
}
.secretaryManagement .el-tabs--card>.el-tabs__header .el-tabs__nav{
    border: none!important;
}
.secretaryManagement .el-tabs--card>.el-tabs__header .el-tabs__item.is-active{
    border: 1px solid #45A04E !important;
    border-bottom:none!important;
    line-height: 40px;
    height: 40px;
    color: #69AD9C;
    background: #fff!important;
}
.secretaryManagement .el-tabs__item{
    height: 40px;
    line-height: 40px;
    margin: 0 5px -1px 5px;
    color: #FFFFFF;
    border-top-right-radius: 3px;
    border-top-left-radius: 3px;
    border: none !important;
}
.secretaryManagement .el-tabs--card>.el-tabs__header .el-tabs__item:first-child{
    background: linear-gradient(to right,#64a9b3,#5fa7a1);
    margin-left: 10px;
}
.secretaryManagement .el-tabs--card>.el-tabs__header .el-tabs__item:nth-child(2){
    background: linear-gradient(to right,#5fa7a1,#55a583);
}
.secretaryManagement .el-tabs--card>.el-tabs__header .el-tabs__item:nth-child(3){
    background: linear-gradient(to right,#54a47e,#4ba263);
}
.secretaryManagement .el-tabs--card>.el-tabs__header .el-tabs__item:nth-child(4){
    background: linear-gradient(to right,#4ba263,#45a04e);
}
.secretaryManagement .el-tabs--card>.el-tabs__header .el-tabs__item:nth-child(5){
    background: linear-gradient(to right,#64a9b3,#45a04e);
}
</style>
<style scoped>
</style>
